<template>
	<view class="home">
		<u-navbar title="好友组局" :placeholder="true" bgColor="rgba(0,0,0,0.0)" :autoBack="false">
			<view slot="left"></view>
		</u-navbar>
		<view class="head">
			<image @click="goDetails(1)" class="head-img" src="https://m.lqvvvv.com/images/organize/head1.png" mode="">
			</image>
			<image @click="goDetails(2)" class="head-img" src="https://m.lqvvvv.com/images/organize/head2.png" mode="">
			</image>
		</view>
		<!-- <view class="head-tabs">
			<view class="head-item" v-for="(item,index) in tabs" :key="index" @click="headTabs(index)"
				:class="item.show == false?'':'activity-item'">
				<image class="item-img" :src="item.img" mode=""></image>
				<view>{{item.text}}</view>
			</view>
		</view> -->
		<view class="search">
			<u-search height="80rpx" placeholder="搜索关键词" v-model="search" @search="gosearch" :showAction="false"
				bgColor="#ffffff"></u-search>
		</view>
		<view class="game">
			<view class="game-item" @click="gonavto(item.id)" v-for="(item,index) in list" :key="index">
				<view class="item-info">
					<image class="info-img" :src="item.image" mode="aspectFill"></image>
					<view class="info-right">
						<view class="info-title">
							{{item.title}}
						</view>
						<view class="info-text">
							<image class="text-image" src="https://m.lqvvvv.com/images/organize/time.png" mode="">
							</image>
							<view class="count">
								倒计时:
								<u-count-down :time="item.sdjstime * 1000" @change="onChange">
									<view class="time">
										<text class="time__item">{{ timeData.days }}天</text>
										<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}时</text>
										<text class="time__item">{{ timeData.minutes }}分</text>
										<text class="time__item">{{ timeData.seconds }}秒</text>
									</view>
								</u-count-down>
							</view>
						</view>
						<view class="info-text">
							<image class="text-image" src="https://m.lqvvvv.com/images/organize/time.png" mode="">
							</image>
							<view>
								开始时间:{{$u.timeFormat(item.createtime, 'mm月dd日 MM:ss')}}
								<br>结束时间:{{$u.timeFormat(item.endtime, 'mm月dd日 MM:ss')}}
							</view>
						</view>
						<view class="info-text">
							<image class="text-image" src="https://m.lqvvvv.com/images/organize/address.png" mode="">
							</image>
							<view>
								{{item.address}}
							</view>
						</view>
					</view>
				</view>
				<view class="item-bottom">
					<view class="bottom-left">
						<image class="left-img" v-for="(i,x) in item.join_list" :key="x"
							:src="i.avatar.startsWith('http') ? i.avatar : 'https://m.lqvvvv.com' + i.avatar || 'https://m.lqvvvv.com/assets/static/index/head.png'"
							mode="aspectFill"></image>
						<view class="bottom-num">
							{{item.join_count}}/{{item.num}}
						</view>
					</view>
					<view class="bottom-btn">
						立即加入
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
		<image class="flex" @click="gonav()" src="https://m.lqvvvv.com/images/group/group.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						text: '全部',
						img: 'https://m.lqvvvv.com/images/organize/head-img1.png',
						show: true
					},
					{
						text: '约会',
						img: 'https://m.lqvvvv.com/images/organize/head-img2.png',
						show: false
					},
					{
						text: 'KTV专区',
						img: 'https://m.lqvvvv.com/images/organize/head-img3.png',
						show: false
					},
					{
						text: '甜蜜派对',
						img: 'https://m.lqvvvv.com/images/organize/head-img4.png',
						show: false
					}
				],
				search: '',
				page: 1,
				list: [],
				status: 'loadmore',
				timeData: {},
			}
		},
		onShow() {
			this.page = 1
			this.getList()
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = ++this.page;
			this.getList()
		},
		methods: {
			onChange(e) {
				this.timeData = e
			},
			gosearch() {
				this.page = 1
				this.getList()
			},
			gonav() {
				let token = uni.getStorageSync("token") || '';
				if (token != '') {
					uni.navigateTo({
						url: "/pages/my/organize/release/index"
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '请登录！体验完整功能！',
						confirmText: '去登录',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.reLaunch({
									url: '/pages/login/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			gonavto(id) {
				uni.navigateTo({
					url: '/pages/my/organize/details/index?id=' + id
				})
			},
			headTabs(index) {
				this.tabs.map(item => {
					item.show = false
				})
				this.tabs[index].show = true
			},
			getList() {
				let params = {
					page: this.page,
					limit: 10,
					keyword: this.search
				}
				this.$Request({
					method: 'POST',
					url: '/api/user_activity/getList',
					data: params,
					ismsg: false,
				}).then(res => {
					console.log(res.data, 123)
					if (res.code == 1) {
						if (res.data.data.length < 10) {
							this.status = 'nomore';
						}
						if (this.page == 1) {
							res.data.data.map(item => {
								item.sdjstime = item.endtime - Math.floor(new Date().getTime() / 1000)
							})
							this.list = res.data.data
						} else {
							res.data.data.map(item => {
								item.sdjstime = item.endtime - Math.floor(new Date().getTime() / 1000)
							})
							this.list = [...this.list, ...res.data.data]
						}
					}
				})
			},
			goDetails(type) {
				let token = uni.getStorageSync("token") || '';
				if (token != '') {
					if (type == 1) {
						uni.navigateTo({
							url: '/pages/my/organize/my_release/index'
						})
					} else {
						uni.navigateTo({
							url: '/pages/my/organize/my_join/index'
						})
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '请登录！体验完整功能！',
						confirmText: '去登录',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.reLaunch({
									url: '/pages/login/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}

			}
		}
	}
</script>

<style>
	page {
		background-color: #F4F7FC;
	}
</style>
<style lang="scss" scoped>
	.flex {
		width: 130rpx;
		height: 130rpx;
		position: fixed;
		bottom: 300rpx;
		right: 20rpx;

	}

	.home {
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 900rpx;
		min-height: 100vh;
		padding: 20px;

		.head {
			display: flex;
			justify-content: space-between;

			.head-img {
				width: 48%;
				height: 120rpx;
			}
		}

		.head-tabs {
			display: flex;
			justify-content: space-around;
			margin-top: 30rpx;

			.head-item {
				font-size: 24rpx;
				color: #363636;
				background: rgba(255, 255, 255, 0.41);
				border-radius: 20rpx;
				padding: 10rpx 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.item-img {
					width: 45rpx;
					height: 45rpx;
					margin-right: 5rpx;
				}
			}

			.activity-item {
				background-color: #CBECFF;
			}
		}

		.search {
			margin-top: 30rpx;
		}

		.game {
			padding-bottom: 30rpx;

			.game-item {
				background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding: 20rpx;
				border-radius: 20px;
				margin-top: 20px;

				.item-info {
					display: flex;
					align-items: center;
					justify-content: space-around;

					.info-img {
						width: 210rpx;
						height: 210rpx;
						border-radius: 20rpx;
					}

					.info-right {
						margin-left: 20rpx;

						.info-title {
							width: 300rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
							font-weight: 800;
							font-size: 32rpx;
							color: #000000;
						}

						.info-text {
							display: flex;
							align-items: center;
							font-weight: 400;
							font-size: 24rpx;
							color: #8B8DA0;
							margin-top: 10rpx;

							.count {
								display: flex;
								align-items: center;
								.time {
								    @include flex;
								    align-items: center;
								
								    &__item {
								         font-size: 24rpx;
								         color: #a09ef2;
								     }
								}
							}

							view {
								width: 300rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								-o-text-overflow: ellipsis;
								text-overflow: ellipsis;
								/* 超出部分显示省略号 */
							}

							.text-image {
								width: 30rpx;
								height: 30rpx;
								margin-right: 10rpx;
							}
						}
					}
				}

				.item-bottom {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.bottom-btn {
						padding: 15rpx 30rpx;
						background-color: #5755F2;
						color: #ffffff;
						font-weight: 600;
						font-size: 24rpx;
						border-radius: 30rpx;
					}

					.bottom-left {
						display: flex;
						align-items: center;

						.left-img {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
						}

						.bottom-num {
							color: #8e8da0;
							font-size: 28rpx;
							font-weight: 400;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>